<template>
  <div>
    <div v-show="!isShowAddCityMannage">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="地区:" prop="cityId">
            <el-select v-model="searchInfo.cityId" clearable filterable placeholder="全部">
              <el-option v-for="item in cityList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部">
              <el-option label="生效中" value="0"></el-option>
              <el-option label="已失效" value="1"></el-option>
              <el-option label="待生效" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="showCityPeriod">添加城市账期</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="status" slot-scope="merchantList">
            <div>{{merchantList.row.status === 0 ? "已失效" : merchantList.row.status === 1 ? "生效中" : "待生效"}}</div>
          </template>
          <template slot="operation" slot-scope="merchantList">
            <el-button type="text" @click="watchDetail(merchantList.row)" v-if="merchantList.row.status !== 2">查看</el-button>
            <el-button type="text" v-if="merchantList.row.status === 1" @click="freezeAccount(merchantList.row)">停用</el-button>
            <el-button type="text" @click="editPeriod(merchantList.row)" v-if="merchantList.row.status === 2">编辑</el-button>
            <el-button type="text" v-if="merchantList.row.status === 2" @click="unFreezeAccount(merchantList.row)">启用</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <BillPassReview :isShowDetail.sync="isShowFreezeModel" :title="freezeTitle" :dataInfo="passReviewInfo" @fresh="fresh"></BillPassReview>
    <BillNotPassReview :isShowDetail.sync="isShowUnFreezeModel" :title="unFreezeTitle" :dataInfo="passReviewInfo" @fresh="fresh"></BillNotPassReview>
    <CityPeriod v-if="isShowAddCityMannage" @goBack="goBack" @fresh="fresh" :dataInfo="dataInfo" :list="cityList" :title="subTitle" :url="url"></CityPeriod>
  </div>
</template>

<script>
  import BillPassReview from './components/BillPassReview'
  import BillNotPassReview from './components/BillNotPassReview'
  import CityPeriod from './components/CityPeriod'
    export default {
        name: "MerchantAPManagement",
        components: { BillPassReview, BillNotPassReview, CityPeriod },
        data() {
          return {
            title: "采购商账期方案管理",
            searchInfo: {
              cityId: null,
              status: null
            },
            url: apis.finance.addMerchantProid,
            cityList: [],
            dataInfo: {},
            passReviewInfo: {},
            subTitle: "",
            isShowFreezeModel: false,
            isShowUnFreezeModel: false,
            isShowAddCityMannage: false,
            freezeTitle: "停用操作",
            unFreezeTitle: "启用操作",
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                {
                  id: '1',
                  label: '地区',
                  prop: 'cityName'
                },
                {
                  id: '2',
                  label: '方案名称',
                  fixed: "left",
                  prop: 'accountName'
                },
                {
                  id: '3',
                  label: 'N+0（%）',
                  prop: 'firstRate'
                },
                {
                  id: '4',
                  label: 'N+1（%）',
                  prop: 'secondRate'
                },
                {
                  id: '5',
                  label: 'N+2（%）',
                  prop: 'thirdRate'
                },
                {
                  id: '6',
                  label: 'N+3（%）',
                  prop: 'fourRate'
                },
                {
                  id: '7',
                  label: 'N+4（%）',
                  prop: 'fiveRate'
                },
                {
                  id: '8',
                  label: 'N+5（%）',
                  prop: 'sixRate'
                },
                {
                  id: '9',
                  label: '状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '10',
                  label: '操作',
                  show: 'template',
                  fixed: "right",
                  width: "120",
                  prop: 'operation'
                }
              ],
              operation: [],
              data: []
            },
            pageTotal:0,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          fresh() {
            this.getData()
          },
          refreshFuc() {
            this.resetForm('searchInfo')
            this.currentPage = 1;
            this.pageSize = 10
            this.getData()
          },
          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },
          watchDetail(obj) {
            ajax.get(apis.finance.getPeriod, { id: obj.id }).then(res => {
              if(res.code == "10000000") {
                this.dataInfo = res.data;
                this.dataInfo && this.dataInfo.merchantSchemeStarVoList.map((item, index) => {
                  item.rate = item.rate ? Math.round(item.rate * 100000) / 1000 : 0
                  item.starName = "*N+" + item.starName
                })
                this.subTitle = "查看账期方案管理"
                this.dataInfo.pageType = '1'
                this.isShowAddCityMannage = true;
              } else {
                this.$message.error(res.message)
              }
            })
          },
          // 进入编辑页面
          editPeriod(obj) {
            ajax.get(apis.finance.getPeriod, { id: obj.id }).then(res => {
              if(res.code == "10000000") {
                this.dataInfo = res.data;
                this.dataInfo && this.dataInfo.merchantSchemeStarVoList.map((item, index) => {
                  item.rate = item.rate ? Math.round(item.rate * 100000) / 1000 : 0
                  item.starName = "*N+" + item.starName
                })
                this.dataInfo.id = res.data.id;
                this.url = apis.finance.editMerchantProid
                this.subTitle = "编辑账期方案管理"
                this.isShowAddCityMannage = true;
              } else {
                this.$message.error(res.message)
              }
            })
          },
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.finance.merchantScheme, data).then(res => {
              if(res.code === "10000000") {
                this.dataTable.data = res.data.dataList ? res.data.dataList : [];
                this.dataTable.data.forEach(item => {
                  item.firstRate = item['0'] !== undefined ? Math.round(item['0'] * 10000)/100 : ""
                  item.secondRate = item['1'] !== undefined ? Math.round(item['1'] * 10000)/100 : ""
                  item.thirdRate = item['2'] !== undefined ? Math.round(item['2'] * 10000)/100 : ""
                  item.fourRate = item['3'] !== undefined ? Math.round(item['3'] * 10000)/100 : ""
                  item.fiveRate = item['4'] !== undefined ? Math.round(item['4'] * 10000)/100 : ""
                  item.sixRate = item['5'] !== undefined ? Math.round(item['5'] * 10000)/100 : ""
                })
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false;
            })
          },
          dropCity() {
            ajax.get(apis.finance.getMerchantCity).then(res => {
              if(res.code === "10000000") {
                this.cityList = res.data;
              } else {
                this.$message.error(res.message)
              }
            })
          },
          onSearch() {
            this.currentPage = 1;
            this.getData();
          },
          goBack() {
            this.subTitle = ""
            this.isShowAddCityMannage = false;
          },
          showCityPeriod() {
            this.dataInfo = {

            }
            this.url = apis.finance.addMerchantProid
            this.subTitle = '新增账期方案管理'
            this.isShowAddCityMannage = true;
          },
          // 冻结
          freezeAccount(obj) {
            this.passReviewInfo = obj
            // 查看总经理的电话
            ajax.get(apis.finance.getGmTel).then(res => {
              if(res.code == "10000000") {
                this.passReviewInfo.gmTel = res.data;
                this.passReviewInfo.sendCode = apis.finance.sendMerchantCode
                this.passReviewInfo.url = apis.finance.notPassMerchantBill
                this.isShowFreezeModel = true;
              }
            })
          },
          unFreezeAccount(obj) {
            this.passReviewInfo = obj
            // 查看总经理的电话
            ajax.get(apis.finance.getGmTel).then(res => {
              if(res.code == "10000000") {
                this.passReviewInfo.gmTel = res.data;
                this.passReviewInfo.sendCode = apis.finance.sendMerchantCode
                this.passReviewInfo.url = apis.finance.passMerchantBill
                this.isShowUnFreezeModel = true;
              }
            })
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
        },
        created() {
          this.onSearch()
          this.dropCity()
        }
    }
</script>

<style lang="scss" scoped>

</style>
